<template>
  <div>
    <router-view></router-view>
    <div>
      <van-tabbar
        v-model="active"
        active-color="#ef8642"
        :placeholder="true"
        :route="true"
      >
        <van-tabbar-item icon="wap-home-o" to="/home/index"
          >首页</van-tabbar-item
        >
        <van-tabbar-item icon="fire-o" to="/home/circle">圈子</van-tabbar-item>

        <div>
          <van-cell @click="showPopup" close-icon="cross">
            <img src="../assets/img/fabu.png" alt="" class="issue" />
          </van-cell>

          <van-popup
            v-model:show="show"
            position="bottom"
            :style="{ height: '20%' }"
            :round="true"
          >
            <ul class="bottom-list">
              <li><p>发文</p></li>
              <li><p>发图</p></li>
              <li><p>视频</p></li>
              <li><p>制品</p></li>
            </ul>
          </van-popup>
        </div>

        <van-tabbar-item icon="goods-collect-o" to="/home/markt"
          >市集</van-tabbar-item
        >
        <van-tabbar-item icon="friends-o" to="/home/userinfo"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>
<script>
import { Tabbar, TabbarItem, Cell, Popup } from "vant";

import { ref } from "vue";

export default {
  components: {
    VanTabbar: Tabbar,
    VanTabbarItem: TabbarItem,
    VanPopup: Popup,
    VanCell: Cell,
  },

  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const active = ref(0);
    return { active, showPopup, show };
  },
};
</script>

<style lang="less" scoped>
.clear-fix:after {
  content: "";
  height: 0;
  clear: both;
  overflow: hidden;
  display: block;
  visibility: hidden;
}
.issue {
  width: 27px;
  height: 28px;
}
.bottom-list {
  margin-bottom: 50px;
}
.bottom-list li {
  float: left;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin: 40px 10px 40px 28px;
}
.bottom-list li:nth-child(1) {
  background: #3ecffb;
  margin-left: 20px;
}
.bottom-list li:nth-child(2) {
  background: #fe6c93;
}
.bottom-list li:nth-child(3) {
  background: #ff88da;
}
.bottom-list li:nth-child(4) {
  background: #ffaf87;
  margin-right: 20px;
}
.bottom-list li p {
  display: block;
  font-size: 18px;
  font-family: PingFang;
  font-weight: 500;
  color: #ffffff;
  line-height: 54px;
  text-align: center;
}
.van-popup--bottom {
  bottom: 150px !important;
}
.van-badge__wrapper::before {
  display: none;
}

.van-badge__wrapper .van-icon .van-icon-arrow .van-cell__right-icon {
  display: none;
}
</style>
